<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>卡通刮刮乐</title>
  <style>
    body {
      font-family: 'Comic Sans MS', 'Chalkboard SE', 'Arial', sans-serif;
      background: #ffe4fa;
      margin: 0;
      padding: 0;
      min-height: 100vh;
    }

    .container {
      max-width: 900px;
      margin: 30px auto;
      background: #fff8fc;
      border-radius: 20px;
      box-shadow: 0 8px 24px #e0b3e6;
      padding: 30px 20px 40px 20px;
    }

    h1 {
      text-align: center;
      color: #ff69b4;
      font-size: 2.5em;
      margin-bottom: 10px;
      letter-spacing: 2px;
      text-shadow: 1px 2px 0 #fff, 2px 4px 0 #f9c2ff;
    }

    .settings {
      background: #fff0f6;
      border-radius: 15px;
      padding: 20px;
      margin-bottom: 25px;
      box-shadow: 0 2px 8px #f3c6e7;
      position: relative;
      transition: max-height 0.4s, padding 0.4s;
      overflow: hidden;
    }

    .settings.collapsed {
      max-height: 0;
      padding: 0 20px;
      margin-bottom: 0;
    }

    .settings-content {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      align-items: flex-start;
    }

    .settings label {
      font-weight: bold;
      color: #d46abf;
      margin-right: 10px;
    }

    .settings input,
    .settings textarea {
      border: 2px solid #ffb6e6;
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 1em;
      background: #fff;
      margin-bottom: 10px;
      outline: none;
      transition: border 0.2s;
    }

    .settings input:focus,
    .settings textarea:focus {
      border: 2px solid #ff69b4;
    }

    .settings textarea {
      resize: vertical;
      min-height: 40px;
      max-height: 120px;
      width: 220px;
    }

    .settings-btns {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .btn {
      background: linear-gradient(90deg, #ffb6e6 0%, #ff69b4 100%);
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 8px 18px;
      font-size: 1em;
      font-weight: bold;
      cursor: pointer;
      box-shadow: 0 2px 6px #f3c6e7;
      transition: background 0.2s, transform 0.1s;
    }

    .btn:hover {
      background: linear-gradient(90deg, #ff69b4 0%, #ffb6e6 100%);
      transform: scale(1.05);
    }

    .toggle-settings {
      position: absolute;
      top: 10px;
      right: 20px;
      background: #fff;
      border: 2px solid #ffb6e6;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      font-size: 1.2em;
      color: #ff69b4;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 4px #f3c6e7;
      z-index: 2;
      transition: background 0.2s;
    }

    .toggle-settings:hover {
      background: #ffe4fa;
    }

    .scratch-area {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 24px;
      margin-top: 10px;
      justify-items: center;
    }

    .scratch-card {
      width: 120px;
      height: 120px;
      background: linear-gradient(135deg, #fff 60%, #ffe4fa 100%);
      border-radius: 22px;
      box-shadow: 0 8px 24px #e0b3e6, 0 2px 8px #fff0f6 inset;
      border: 4px solid #ffb6e6;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5em;
      font-weight: bold;
      color: #ff69b4;
      user-select: none;
      cursor: pointer;
      transition: transform 0.1s, box-shadow 0.2s;
    }

    .scratch-card:hover {
      box-shadow: 0 12px 32px #e0b3e6, 0 2px 8px #fff0f6 inset;
      transform: scale(1.04) rotate(-2deg);
    }

    .scratch-card:active {
      transform: scale(0.97) rotate(1deg);
    }

    .prize-content {
      z-index: 1;
      text-align: center;
      font-size: 2em;
      color: #ff69b4;
      padding: 10px;
      pointer-events: none;
      font-family: 'Comic Sans MS', 'Chalkboard SE', 'Arial', sans-serif;
      text-shadow: 0 2px 8px #fff, 0 1px 0 #ffb6e6;
      letter-spacing: 1px;
    }

    .scratch-cover {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: repeating-linear-gradient(135deg, #bdbdbd 0 10px, #e0e0e0 10px 20px);
      z-index: 2;
      border-radius: 18px;
      cursor: pointer;
      transition: opacity 0.3s;
      box-shadow: 0 2px 8px #bdbdbd inset;
      opacity: 0.95;
    }

    .scratch-canvas {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      z-index: 3;
      border-radius: 18px;
      pointer-events: auto;
      background: transparent;
    }

    /* 卡通小装饰 */
    .decoration {
      position: absolute;
      width: 60px;
      height: 60px;
      z-index: 10;
      pointer-events: none;
      opacity: 0.7;
    }

    .decoration.star {
      top: -20px;
      left: -20px;
      background: url('https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/2b50.png') no-repeat center/contain;
    }

    .decoration.heart {
      bottom: -20px;
      right: -20px;
      background: url('https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/2764.png') no-repeat center/contain;
    }

    /* 全屏撒花特效 */
    .confetti {
      pointer-events: none;
      position: fixed;
      left: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      z-index: 9999;
      pointer-events: none;
    }

    @media (max-width: 600px) {
      .container {
        padding: 10px 2px 20px 2px;
      }

      .scratch-card {
        width: 90px;
        height: 90px;
        font-size: 1em;
      }

      .settings-content {
        flex-direction: column;
        gap: 10px;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>🎉 卡通刮刮乐 🎁</h1>
    <div class="settings" id="settingsPanel">
      <button class="toggle-settings" id="toggleSettingsBtn" title="收起/展开设置">⬆️</button>
      <div class="settings-content">
        <div>
          <label for="prizes">奖品列表（每行一个）:</label><br>
          <textarea id="prizes" rows="4" placeholder="如：\n一等奖\n二等奖\n谢谢参与"></textarea>
        </div>
        <div>
          <label for="count">方块数量:</label><br>
          <input type="number" id="count" min="1" max="50" value="9" style="width:60px;">
        </div>
        <div class="settings-btns">
          <button class="btn" id="applyBtn">应用设置</button>
          <button class="btn" id="startBtn">开始活动</button>
        </div>
      </div>
    </div>
    <div class="scratch-area" id="scratchArea"></div>
    <div class="decoration star"></div>
    <div class="decoration heart"></div>
  </div>

  <noscript>
    <style>
      body {
        display: none !important;
      }
    </style>
    <meta http-equiv="refresh" content="0; url=about:blank">
  </noscript>
  <script src="security.js"></script>

  <script>
    // 卡通表情池
    const cuteEmojis = ['🐰', '🐱', '🐻', '🦄', '🐼', '🐤', '🦊', '🐧', '🐶', '🐯', '🦋', '🍭', '🍬', '🍓', '🍉', '🍦', '🍪', '🍩', '🍒', '🍰', '🎈', '🎀', '🌸', '🌈', '⭐', '💖', '💎', '🧸', '🪄', '🧁'];

    // 获取元素
    const settingsPanel = document.getElementById('settingsPanel');
    const toggleSettingsBtn = document.getElementById('toggleSettingsBtn');
    const prizesInput = document.getElementById('prizes');
    const countInput = document.getElementById('count');
    const applyBtn = document.getElementById('applyBtn');
    const startBtn = document.getElementById('startBtn');
    const scratchArea = document.getElementById('scratchArea');

    // 状态
    let prizes = ['一等奖', '二等奖', '三等奖', '谢谢参与', '谢谢参与', '谢谢参与', '谢谢参与', '谢谢参与', '谢谢参与'];
    let cardCount = 9;
    let started = false;

    // 初始化
    function initSettings() {
      prizesInput.value = prizes.join('\n');
      countInput.value = cardCount;
    }
    function shuffle(arr) {
      for (let i = arr.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [arr[i], arr[j]] = [arr[j], arr[i]];
      }
      return arr;
    }
    function randomEmoji() {
      return cuteEmojis[Math.floor(Math.random() * cuteEmojis.length)];
    }

    // 全屏撒花动画
    function showConfetti() {
      if (document.querySelector('.confetti')) return;
      const confetti = document.createElement('canvas');
      confetti.className = 'confetti';
      confetti.width = window.innerWidth;
      confetti.height = window.innerHeight;
      document.body.appendChild(confetti);
      const ctx = confetti.getContext('2d');
      const colors = ['#ff69b4', '#ffb6e6', '#ffe066', '#a3e635', '#38bdf8', '#f472b6', '#fbbf24', '#f87171', '#a78bfa', '#facc15'];
      const emojis = ['🎉', '🎊', '💖', '⭐', '🌸', '🦄', '🍭', '🧁', '🎈', '🧸'];
      const pieces = [];
      for (let i = 0; i < 80; i++) {
        pieces.push({
          x: Math.random() * confetti.width,
          y: Math.random() * -confetti.height,
          r: 16 + Math.random() * 16,
          d: 2 + Math.random() * 2,
          color: colors[Math.floor(Math.random() * colors.length)],
          emoji: emojis[Math.floor(Math.random() * emojis.length)],
          tilt: Math.random() * 10,
          tiltAngle: 0,
          tiltAngleInc: (Math.random() * 0.07) + 0.03
        });
      }
      let frame = 0;
      function draw() {
        ctx.clearRect(0, 0, confetti.width, confetti.height);
        for (let p of pieces) {
          ctx.save();
          ctx.font = p.r + 'px serif';
          ctx.translate(p.x, p.y);
          ctx.rotate(p.tilt * Math.PI / 180);
          ctx.globalAlpha = 0.85;
          ctx.fillText(p.emoji, 0, 0);
          ctx.restore();
          p.y += p.d + Math.sin(frame / 10 + p.x / 100) * 1.5;
          p.tilt += p.tiltAngleInc;
          if (p.y > confetti.height + 40) {
            p.y = -40;
            p.x = Math.random() * confetti.width;
          }
        }
        frame++;
        if (frame < 220) requestAnimationFrame(draw);
        else setTimeout(() => confetti.remove(), 800);
      }
      draw();
    }

    // 刮奖粒子特效
    function spawnScratchParticles(x, y, parent) {
      for (let i = 0; i < 8; i++) {
        const p = document.createElement('div');
        p.style.position = 'absolute';
        p.style.left = (x - 8 + Math.random() * 16) + 'px';
        p.style.top = (y - 8 + Math.random() * 16) + 'px';
        p.style.fontSize = (12 + Math.random() * 10) + 'px';
        p.style.pointerEvents = 'none';
        p.style.opacity = '0.85';
        p.style.transition = 'all 0.7s cubic-bezier(.4,2,.6,1)';
        p.innerText = cuteEmojis[Math.floor(Math.random() * cuteEmojis.length)];
        parent.appendChild(p);
        setTimeout(() => {
          p.style.transform = `translate(${(Math.random() - 0.5) * 60}px,${-40 - Math.random() * 40}px) rotate(${Math.random() * 360}deg)";
          p.style.opacity = '0';
        },10);
        setTimeout(()=>p.remove(),800);
      }
    }

    // 生成刮刮卡
    function renderScratchCards() {
      scratchArea.innerHTML = '';
      // 随机奖品分配
      let prizeList = [];
      for (let i = 0; i < cardCount; i++) {
        prizeList.push(prizes[i % prizes.length]);
      }
      shuffle(prizeList);
      for (let i = 0; i < cardCount; i++) {
        const card = document.createElement('div');
        card.className = 'scratch-card';
        // 奖品内容
        const prizeDiv = document.createElement('div');
        prizeDiv.className = 'prize-content';
        prizeDiv.innerHTML = randomEmoji() + '<br>' + prizeList[i];
        card.appendChild(prizeDiv);
        // 刮刮层
        const cover = document.createElement('div');
        cover.className = 'scratch-cover';
        card.appendChild(cover);
        // canvas刮刮乐
        const canvas = document.createElement('canvas');
        canvas.className = 'scratch-canvas';
        canvas.width = 120;
        canvas.height = 120;
        card.appendChild(canvas);

        // 初始化canvas
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = ctx.createPattern(createPatternCanvas(), 'repeat');
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // 刮刮逻辑
        let isDrawing = false;
        let revealed = false;
        function scratch(x, y) {
          ctx.globalCompositeOperation = 'destination-out';
          ctx.beginPath();
          ctx.arc(x, y, 18, 0, Math.PI * 2);
          ctx.fill();
        }
        function checkReveal() {
          // 检查透明像素比例
          const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
          let transparent = 0;
          for (let i = 3; i < imgData.data.length; i += 4) {
            if (imgData.data[i] === 0) transparent++;
          }
          if (transparent / (canvas.width * canvas.height) > 0.5 && !revealed) {
            canvas.style.opacity = 0;
            cover.style.opacity = 0;
            revealed = true;
            setTimeout(showConfetti, 200);
          }
        }
        canvas.addEventListener('mousedown', e => {
          if (revealed) return;
          isDrawing = true;
          const rect = canvas.getBoundingClientRect();
          const x = e.clientX - rect.left;
          const y = e.clientY - rect.top;
          scratch(x, y);
          spawnScratchParticles(x, y, card);
          checkReveal();
        });
        canvas.addEventListener('mousemove', e => {
          if (!isDrawing || revealed) return;
          const rect = canvas.getBoundingClientRect();
          const x = e.clientX - rect.left;
          const y = e.clientY - rect.top;
          scratch(x, y);
          spawnScratchParticles(x, y, card);
          checkReveal();
        });
        window.addEventListener('mouseup', () => isDrawing = false);
        // 触摸支持
        canvas.addEventListener('touchstart', e => {
          if (revealed) return;
          isDrawing = true;
          const rect = canvas.getBoundingClientRect();
          const t = e.touches[0];
          const x = t.clientX - rect.left;
          const y = t.clientY - rect.top;
          scratch(x, y);
          spawnScratchParticles(x, y, card);
          checkReveal();
        });
        canvas.addEventListener('touchmove', e => {
          if (!isDrawing || revealed) return;
          const rect = canvas.getBoundingClientRect();
          const t = e.touches[0];
          const x = t.clientX - rect.left;
          const y = t.clientY - rect.top;
          scratch(x, y);
          spawnScratchParticles(x, y, card);
          checkReveal();
        });
        window.addEventListener('touchend', () => isDrawing = false);

        scratchArea.appendChild(card);
      }
    }
    // 生成灰色卡通图案
    function createPatternCanvas() {
      const pCanvas = document.createElement('canvas');
      pCanvas.width = 40;
      pCanvas.height = 40;
      const pCtx = pCanvas.getContext('2d');
      pCtx.fillStyle = '#bdbdbd';
      pCtx.fillRect(0, 0, 40, 40);
      pCtx.font = '24px Comic Sans MS, Arial';
      pCtx.globalAlpha = 0.3;
      pCtx.fillStyle = '#fff';
      pCtx.fillText(randomEmoji(), 5, 30);
      return pCanvas;
    }

    // 设置面板收起/展开
    toggleSettingsBtn.addEventListener('click', () => {
      settingsPanel.classList.toggle('collapsed');
      toggleSettingsBtn.innerText = settingsPanel.classList.contains('collapsed') ? '⬇️' : '⬆️';
    });

    // 应用设置
    applyBtn.addEventListener('click', () => {
      const prizeLines = prizesInput.value.split('\n').map(s => s.trim()).filter(Boolean);
      const count = parseInt(countInput.value, 10);
      if (prizeLines.length === 0 || isNaN(count) || count < 1) {
        alert('请填写奖品和方块数量');
        return;
      }
      prizes = prizeLines;
      cardCount = count;
      renderScratchCards();
    });

    // 开始活动
    startBtn.addEventListener('click', () => {
      settingsPanel.classList.add('collapsed');
      started = true;
    });

    // 初始化
    initSettings();
    renderScratchCards();
  </script>
</body>

</html>